今日主題：

像檢查作業一樣檢查 AI 寫的程式
今天要記的口訣叫 SOLID，是程式設計的 5 個小祕訣。

背誦小口訣：SOLID (2004)

• S (SRP)：一個人只做一件事
  就像媽媽只負責煮飯，爸爸只負責倒垃圾，不要一個人包辦全部。

• O (OCP)：開放又關閉
  就像家裡的插座，隨時可以插新的電器（開放），但不用拆掉牆壁（封閉）。

• L (LSP)：替換原則
  就像玩積木，你可以換掉一塊積木，城堡還是能站得好好的。

• I (ISP)：小介面
  就像點餐，有「早餐菜單」「午餐菜單」，不用把所有食物都塞在同一本大菜單裡。

• D (DIP)：依賴相反
  就像你插 USB，不用管插到電腦還是充電頭，只要有孔就能用。

DEMO 用 AI 寫的簡單小測驗

初始 Prompt:

可以幫我寫一個小遊戲，去判斷對或是錯，題目是以下這些原則
SOLID (2004)
SRP：單一職責原則
OPC：開放 封閉原則
LSP：Liskov 替換原則
ISP：介面隔離原則
DIP：依賴相反原則

完整 Prompt 流程：
需求提出：最初要一個判斷「對/錯」的 SOLID 原則小遊戲。
升級難度：改成三選一題型。
情境轉換：題目從文字描述 → 改成程式碼範例判斷原則。
結構優化：把題庫抽出成 questions.json。
功能擴充：加上程式語言切換（TypeScript / Python / C#）。

今日小故事：

今天想要在自己的部落格加上故事書 (Storybook) 的功能，
這樣 AI 就可以拿一些做好的元件來裝飾網站，好像在貼貼紙一樣。

結果沒想到，安裝軟體的時候就遇到麻煩了。

1. 有時候我們在「發想」，是要教 AI 怎麼畫圖或做網站，
   這時候最好給它「食譜」──像程式碼或 Storybook，
   讓它照著做，就能比較準確。

2. 有時候我們會「遇到狀況」，就像工具壞掉一樣，
   這時候要先修理好工具，舞台才會亮起來，演出才能開始。

錯誤資訊：

=> Failed to build the preview
Error: Can not found environment context for client

可能是 Storybook 在啟動時，因為用了 vite-plugin-inspect 跟 rolldown-vite 的組合，
結果建立 Vite 的「舞台環境」失敗，找不到 client 端的設定，
所以 Storybook 的預覽就中斷了。

最後，我只好去找另一個軟體 Histoire 來試試看。

在程式中的應用：

從 Storybook 到 Histoire

在安裝 Storybook 時遇到錯誤，改採用 Histoire 作為替代方案，並建立一個範例元件。

1. 新增檔案

這次變更包含以下檔案：

# git show --name-only

OUTPUT:
frontend/histoire.config.ts
frontend/package.json
frontend/src/components/shared/AnimatedBorderButton.story.vue
frontend/src/components/shared/AnimatedBorderButton.vue

2. 啟動設定

在 package.json 新增 Histoire 的指令：

"scripts": {
  ...
  "story:dev": "histoire dev",
  "story:build": "histoire build",
  "story:preview": "histoire preview"
}

執行以下指令啟動 Histoire：

pnpm story:dev

3. 執行結果

啟動後就可以在 Histoire 介面中看到元件展示，YA：

小結與思考：

如果請 AI 寫程式，我們怎麼知道它有沒有乖乖遵守規則呢？
下次我們能不能讓 AI 幫我們建好一個漂亮的頁面，還要符合我們想要的設計規範呢？